import Taro, { Component } from '@tarojs/taro'
import {Image, View} from '@tarojs/components'
import { SDBody } from 'sudao-ui'

import GoodsItem from '../../../comps/goods-item'
import SDButton from '../../../comps/sd-button'

import SuccessIcon from '../../../images/ic_success_green.png'
import FailureIcon from '../../../images/ic_failure.png'
import NextIcon from '../../../images/ic_next.png'

import './index.less'
import SDUtils from "sudao-utils";

type PageState = {
  mainIsLoading: boolean,
  dataList: any[],
  paymentType: string
}

export default class PaymentResultPage extends Component<{}, PageState> {

  constructor () {
    super(...arguments)
    this.state = {
      mainIsLoading: true,
      dataList: [],
      paymentType: 'success'
    }
  }

  orderId: any = ''
  paymentType: string = ''

  componentDidMount () {
    let orderId = (this.$router.params || {}).orderId || 40
    let paymentType = (this.$router.params || {}).paymentType || 'success'
    this.orderId = orderId
    this.paymentType = paymentType
    this.fetchData()
  }

  fetchData = async () => {
    let dataList = []
    try {
      const goodsResp = await SDUtils.doGet(`/wxmini/traderProduct`, {
        offset: 0,
        limit: 20,
        traderId: '1'
      })
      dataList = dataList.concat(goodsResp.items || [])
    } catch (e) {
      SDUtils.showMsg(e)
    } finally {
      this.setState({
        mainIsLoading: false,
        dataList: dataList,
        paymentType: this.paymentType
      })
    }
  }

  render () {
    const {paymentType, dataList, mainIsLoading} = this.state
    return (
      <SDBody sd-class='container' loading={mainIsLoading}>
        <View className="main-empty">
          <View className="header">
            <Image className="icon" src={paymentType == 'success' ? SuccessIcon : FailureIcon}></Image>
            <View className="title">支付成功</View>
            <View className="bottom">
              <View className="btn-item" onClick={this.gotoHomePage}>
                <SDButton sd-class='btn-normal btn-first'>回首页</SDButton>
              </View>
              <View className="btn-item" onClick={this.gotoOrderDetail}>
                <SDButton sd-class='btn-normal'>查看订单</SDButton>
              </View>
            </View>
          </View>
          <View className="content">
            <View className="section-header">
              <View className="title">推荐商品</View>
              <View className="right" onClick={this.onMoreBtnTaped}>
                <View className="item">
                  <View className="item-title">更多</View>
                  <View className="item-icon-content">
                    <Image className="ic-next" src={NextIcon}></Image>
                  </View>
                </View>
              </View>
            </View>
            <View className="empty-list">
              {
                dataList.map((item, index) => {
                  return (
                    <View className="empty-cell" key={index}>
                      <GoodsItem
                        extData={index}
                        width={336}
                        height={506}
                        imgUrl={item.coverImage || ''}
                        title={item.name}
                        price={SDUtils.formatPrice(`${item.minPrice}`)}
                        showTagPrice={true}
                        tagPrice={SDUtils.formatPrice(`${item.minTagPrice}`)}
                        showCartNum={false}
                        showSalesVolume={true}
                        salesVolume={item.salesVolume || 0}
                        bgColor='#fff'
                        type='recommend'
                        onClick={this.gotoGoodsDetail}
                      />
                    </View>
                  )
                })
              }
            </View>
          </View>
        </View>
      </SDBody>
    )
  }

  onMoreBtnTaped = () => {
    SDUtils.jumpTo('/pages/goods/list/index', {comeFrom: 'recommend'})
  }

  gotoOrderDetail = () => {
    SDUtils.jumpTo('/pages/order/detail/index', {orderId: this.orderId})
  }

  gotoHomePage = () => {
    Taro.reLaunch({
      url: '/pages/tabbar/home/index'
    })
  }

  gotoGoodsDetail = (index: number) => {
    const { dataList } = this.state
    if (index >= dataList.length) {
      return
    }
    let dataItem = dataList[index]
    SDUtils.jumpTo('/pages/goods/detail/index', {productId: dataItem.productId})
  }

}
